<template>
  <view ref="itemRef" :item="item" class="article-item">
    <image style="width: 43.2vw; border-radius: 2vw" :style="{ height: item.type == 'short' ? '43.2vw' : '56vw' }" :src="item.imgUrl" mode="center"></image>
    <text class="title">{{ item.title }}</text>
    <view class="detail">
      <view class="author">{{ item.author }}</view>
      <view class="download-time">
        <up-icon style="display: inline-block; margin-right: 0.3vw" name="download" color="#d5d5d5" size="22" bold></up-icon>
        <text>{{ item.downloadTime }}</text>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref } from 'vue';
const heightStyle = ref('56vw');
const itemRef = ref(null);
defineProps({
  item: {
    type: Object,
    required: true,
    default: () => ({
      title: '默认标题',
      author: '未知作者',
      downloadTime: 0,
      imgUrl: '',
      type: 'short',
      extension: 'png'
    })
  }
});
</script>

<style lang="scss" scoped>
.article-item {
  width: 43.2vw;
  height: auto;
  display: flex;
  flex-direction: column;
  margin-bottom: 4vw;
  .title {
    font-size: 5vw;
    font-weight: bold;
    margin-top: 2vw;
    margin-bottom: 0.5vw;
  }
  .detail {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    color: #d5d5d5;
    font-family: PingFangSC-regular;
    .author {
      font-size: 4vw;
    }
    .download-time {
      text {
        font-size: 4vw;
      }
    }
  }
}
</style>
